<template>
    <div id="main">
        <div class="bar">
            <div class="left">
                管理中心
            </div>
        </div>

        <div class="total">

            <div class="item">
                <div class="icon">
                    <i class="el-icon-finished" style="font-size:50px;"></i>
                </div>
                <div class="info">
                    <div class="num">11</div>
                    <div class="desc">课程开通</div>
                </div>
            </div>

            <div class="item">
                <div class="icon">
                    <i class="el-icon-sort" style="font-size:50px;"></i>
                </div>
                <div class="info">
                    <div class="num">{{ total. studentnum }}</div>
                    <div class="desc">今日课程开通</div>
                </div>
            </div>

            <div class="item">
                <div class="icon">
                    <i class="el-icon-s-custom" style="font-size:50px;"></i>
                </div>
                <div class="info">
                    <div class="num">{{ total.student }} / {{ total.headcount }}</div>
                    <div class="desc">今日/总会员数</div>
                </div>
            </div>

            <div class="item">
                <div class="icon">
                    <i class="el-icon-date" style="font-size:50px;"></i>
                </div>
                <div class="info">
                    <div class="num">{{ total.classnum }}</div>
                    <div class="desc">课程总数</div>
                </div>
            </div>

            <div class="item">
                <div class="icon">
                    <i class="el-icon-shopping-cart-full" style="font-size:50px;"></i>
                </div>
                <div class="info">
                    <div class="num">{{ total.agentnum }}</div>
                    <div class="desc">加盟商员数</div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                total: {},
            }
        },
        computed: {
            token() {
                return localStorage.token;
            }
        },
        created () {
            this.getTotal();
        },
        methods: {
            async getTotal() {
                let res = await this.$axios.post("/admin/website/statistics", { token: this.token })
                console.log(res);
                this.total = res.data.data
            }
        },
    }
</script>

<style lang="scss" scoped>
 #main {
     width: 100%;
     box-sizing: border-box;
     .bar {
         width: 100%;
         font-weight: bold;
         display: flex;
         justify-content: space-between;
         height: 40px;
         line-height: 40px;
         border-bottom: 1px solid #aaa;
     }
     .total {
         width: 100%;
         margin-top: 30px;
         box-sizing: border-box;
         display: flex;
         align-items: center;
         background-color: #f2f2f2;
         padding: 20px;
         .item {
            width: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            .info {
                margin-left: 10px;
            }
            .icon {
                i {
                    font-size: 50px;
                    color: #aaa;
                }
            }
         }
     }
 }
</style>